<template>
  <view class="arrow-tip">
    {{message}}
    <u-icon class="arrow" name="arrow-down-fill" color="#488AFF" size="28" />
  </view>
</template>

<script>

export default {
  props: {
    message: {
      type: String,
      default: null
    }
  },
  data: () => ({
  }),
  computed: {},
  methods: {}
};
</script>

<style lang="less">
.arrow-tip {
  position: relative;
  background-image: linear-gradient(90deg, #3470FF 0%, #5CA5FF 100%);
  padding: 11rpx 22rpx;
  font-family: PingFangSC-Regular;
  font-size: 22rpx;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 22rpx;
  font-weight: 400;
  border-radius: 22rpx;
  .arrow {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
}
</style>